<template>
    <div>
        <div class="sp">
            <ul>
                <li @click="gotoDetail(product.productId)" v-for="product in productList" :key="product.productId">
                    <!-- <img :src="product.imgurl" alt=""> -->
                    <img src="../../assets//images/imgsearch1.jpg" alt="">
                    <p class="productname">{{ product.productName }}</p>
                    <p class="price">
                        $:<strong>{{ product.productPrice }}</strong>

                    </p>
                </li>


            </ul>
        </div>

    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            // productList: [],//分页查询的商品列表
            productList: [

            ],
            cId: 0,
            currentPage: 1,//当前的页码，默认为1
            pageSize: 3,

        }
    },
    mounted() {
        //1. 获取localstorage中的cId
        var cId = localStorage.getItem("cId");
        this.cId = cId;
        this.getProductList();
    },
    methods: {
        getProductList() {
            //获取商品列表
            axios({
                headers: {
                    'token': localStorage.getItem('token')
                },
                method: "post",
                url: "http://localhost:8085/product/getListByType",
                data: {
                    cId: parseInt(this.cId),
                    currentPage: this.currentPage,
                    pageSize: this.pageSize
                }
            }).then(res => {
                console.log(res)
                //1. 获取分类的数据
                this.productList = res.data.data.data
            })
        }
        ,
        //跳转详情页
        gotoDetail(pId) {
            localStorage.setItem("pId", pId);
            this.$router.push('/detail')
        }
    }
}
</script>

<style>
.sp {
    margin: 10px 20px
}

.sp li {
    float: left;
    margin-right: 10px;
}

.sp img {
    width: 200px;
    height: 200px;

}
</style>